<template>
	<div class="goods">
		<div class="swiper" v-if="gallery.length !== 0">
			<swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
				<blok v-for="(item,index) in gallery" :key="index">
					<swiper-item class="swiper-item">
						<img :src="item.img_url" class="slide-image">
					</swiper-item>
				</blok>
			</swiper>
			<button class="share" open-type="share" hover-class="none">分享</button>
		</div>
		<div class="swipers" v-else>
			<p>该商品暂无图片轮播</p>
		</div>

		<div class="swiper-b">
	      	<div class="item">30天无忧退货</div>
	      	<div class="item">48小时快速退款</div>
	      	<div class="item">满88元免邮费</div>
	    </div>

	    <div class="goods-info">
	    	<div class="c" >
	    		<p>{{info.name}}</p>
	    		<p>{{info.goods_brief}}</p>
	    		<p>¥{{info.retail_price}}</p>
	    		<div class="brand" v-if="brand.name">
	    			<p>{{brand.name}}</p>
	    		</div>
	    	</div>
	    </div>

	    <div class="section-nav" @click="showType">
	    	<div>请选择规格数量</div>
	    	<div></div>
	    </div>

		  <!-- 商品参数 -->
	    <div>
	    	<div class="attribute" v-if="attribute.length!==0">
			    <div class="head">
			        商品参数
			    </div>
			    <div class="item" v-for="(item, index) in attribute" :key="index">
			        <div>{{item.name}}</div>
			        <div>{{item.value}}</div>
			    </div>
		    </div>
		    <div class="attribute"  v-else>
		    	<div class="head">
			        暂无商品参数
			    </div>
		    </div>
	    </div>

	    <!-- 图片展示 -->
	    <!-- 含有p标签的图片用wxParse组件 -->
		<div>
			<div class="detail" v-if="goods_desc">
		      	<wxParse :content="goods_desc" />
		    </div>
		    <div class="details" v-else>
		      	该商品暂无详情
		    </div>
		</div>

		<!-- 常见问题 -->
	    <div class="common_problem">
	      	<div class="h">
	        	<text class="title">常见问题</text>
	      	</div>
	      	<div class="b">
		        <div class="item" v-for="(item, index) in issueList" :key="index">
		          	<div class="question-box">
			            <text class="spot"></text>
			            <text class="question">{{item.question}}</text>
		          	</div>
		          	<div class="answer">{{item.answer}}</div>
		        </div>
	      	</div>
	    </div>

		<!-- 底部操作 -->
	    <div class="bottom_fixed">
	    	<!-- 收藏 -->
	      	<div class="collect_box" @click="collect">
	        	<div class="collect" :class="[collectFlag ? 'active' : '']"></div>
	      	</div>
	      	<!-- 购物车与数量图标 -->
	      	<div class="car_box" @click="toCart">
	        	<div class="car" >
		          	<span>{{allnumber}}</span>
		          	<img src="http://r.photo.store.qq.com/psc?/V13kx5iq3fGNrB/h4SLI6MeeCc7mRdKk01uslZ24oytEQPbWIJpIO6NDDYIJZAfT7cdldrXI7KA6Mjh0eMIr1Lc*dQ98Uge5ENAruo0lW*aVxthdcdIwqiN4tM!/r" alt="">
	        	</div>
	      	</div>
	      	<div @click="addCart">加入购物车</div>
	      	<div @click="buy">立即购买</div>	      	
	    </div>


		<!-- 选择规格的弹出层 -->
		<!--  遮盖层 -->
		<div class="pop" v-show="showpop"  @click="showType"></div>
		<div class="attr-pop" :class="[showpop ? 'fadeup' : 'fadedown']">
	     	<div class="top">
		        <div class="left">
		          <img :src="info.primary_pic_url" alt="">
		        </div>
		        <div class="right">
		          	<div>
		            	<p>价格¥{{info.retail_price}}</p>
		            	<p>请选择数量</p> 
		          	</div>
		        </div>
	       		<div class="close" @click="showType">✖️</div>
	      	</div>
	      	<div class="b">
	        	<p>数量</p> 
		        <div class="count">
		          	<div class="cut" @click="reduce">-</div>
		          	<!-- disabled="false"实现输入框里不能聚焦 -->
		          	<input type="text" class="number" v-model="number" disabled="false">
		          	<div class="add" @click="add">+</div>
		        </div>
		    </div>
    	</div>
	</div>
</template>

<script type="text/javascript">
import {get,post} from '@/util'
import wxParse from 'mpvue-wxparse'
export default{
	components:{
		wxParse
	},
	data(){
		return {
			gallery: [], //图片轮播图brand
  			goodsId: '', //从别的页面传过来的商品id
  			openId: '', //用户id
 	 		info: {}, //商品名字价格信息等
  			brand: {}, //商品
  			showpop: false, //控制选择规格的弹出层
  			number: 0, //弹窗出来中要选择几件商品的数量
  			attribute: [], //商品参数
  			goods_desc: '', //商品详情介绍
  			issueList: [], // 常见问题
  			collectFlag: false, //控制收藏
  			allnumber: 0, //购物车上方图标中的商品总数量
  			price:'',
  			name:''
		}
	},
	//分享功能
	onShareAppMessage(){
		return{
			title:this.info.name,
			path:'/pages/goods/main?id'+ this.info.id,
			imageUrl:this.gallery[0].img_url
		}
	},
	onShow(){
		const userinfo = wx.getStorageSync('userinfo')
		this.openId = userinfo.openId
		//拿到商品id
		this.goodsId = this.$root.$mp.query.id
		console.log("接收到的goodsId:",this.goodsId)
		this.number=0
		this.goodsDetail()
	},
	methods:{
		//商品详情
		async goodsDetail(){
			const data = await get('/app/goods/detailaction',{
				goodsId:this.goodsId, //别的页面传过来的商品id
				openId:this.openId
			})
			console.log("goods:",data)
			this.allnumber = data.allnumber //购物车上方图标的总数量
			this.info = data.info[0] //该商品name信息数组
			this.gallery = data.gallery //图片轮播
			this.attribute = data.attribute //商品参数
			this.goods_desc = data.info[0].goods_desc //商品详情
			this.issueList = data.issue //常见问题
			this.collectFlag = data.collected  //收藏图标的状态
			this.price = data.info[0].retail_price//商品单价
		},

		//在选择规格数量时的弹出框
		showType(){
			//将showpop的状态改为与之相反状态
			this.showpop = !this.showpop
		},

		add(){
			this.number +=1
			// console.log("")
		},
		reduce(){
			if(this.number > 1){
				this.number -=1
			}else{
				return false
			}
		},

		//收藏
     	async collect () {
      		this.collectFlag = !this.collectFlag
      		 const data = await post('/app/collect/addcollect', {
        		goodsId:this.goodsId,
        		openId:this.openId
      		})
      		if(data){
      		 	wx.showToast({
        			title: data,
		            duration: 2000,
		            icon: 'none',
		            mask: true,
		            success: res => {}
		        })
      		}
    	},
    	//跳转到购物车界面
    	toCart(){
    		wx.switchTab({
    			url: '/pages/cart/main'
    		})
		},
    	//立即购买
    	async buy () {
    		//如果showpop状态为true时
      		if (this.showpop) {
      			//如果数量为0
        		if (this.number == 0) {
          			wx.showToast({
            			title: '请选择商品数量',
			            duration: 2000,
			            icon: 'none',
			            mask: true,
			            success: res => {}
			          })
          			return false
        		}
     			wx.navigateTo({
    				url: "/pages/toOrder/main?goods_id="+this.goodsId+"&number="+this.number
      			});
          		this.showpop = false
      		}else{
      			//否则将showpop状态改为true
       			this.showpop = true
      		}
    	},
    	//加入购物车
    	async addCart(){
    		//如果showpop状态为true时
      		if (this.showpop) {
      			//如果数量为0
        		if (this.number == 0) {
          			wx.showToast({
            			title: '请选择商品数量',
			            duration: 2000,
			            icon: 'none',
			            mask: true,
			            success: res => {}
			          })
          			return false
        		}
        		//数量不为0时执行数据插入
        		const data = await post('/app/cart/addCart', {
		          	openId: this.openId,
		          	goodsId: this.goodsId,
		          	number: this.number
		        })
		        this.showpop = false
		        if(data){
		        	this.allnumber = this.number +this.allnumber
		        	wx.showToast({
		        		title:'成功添加到购物车',
		        		icon:'success',
		        		duration:1500
		        	})		        	
		        }
      		}else{
      			//否则将showpop状态改为true
       			this.showpop = true
      		}
    	}
	},
	// computed:{
	// 	allPrice(){
	// 		let Price = this.price * this.number
	// 		console.log("总价:",Price)
	// 		return Price
	// 	}		
	// }
}
</script>
<!-- @import "./style.less"; -->
<style lang="scss">
@import url('~mpvue-wxparse/src/wxParse.css');
@import "./goods.scss";
</style>